<html>
  <head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
	  //Draw shapes
    	  ctx.beginPath();
    	  ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
    	  ctx.moveTo(110,75);
    	  ctx.arc(75,75,35,0,Math.PI,false);   // Mouth
    	  ctx.moveTo(65,65);
    	  ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
    	  ctx.moveTo(95,65);
    	  ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
    	  ctx.stroke();
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
    <pre>
function draw(){
  var canvas = document.getElementById('tutorial');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');
    //Draw shapes
    ctx.beginPath();
    ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
    ctx.moveTo(110,75);
    ctx.arc(75,75,35,0,Math.PI,false);   // Mouth
    ctx.moveTo(65,65);
    ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
    ctx.moveTo(95,65);
    ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
    ctx.stroke();
  }
}



    </pre>
  </body>
</html>